import React from 'react'
import { Tasks } from '../api/tasks';
export default class extends React.Component {
    toggleComplete() {
        Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked)
    }
    deleteItem() {
        Meteor.call('tasks.remove', this.props.task._id)
    }
    render() {
        const taskClassName = this.props.task.checked ? 'checked' : ''
        return (
            <li className={taskClassName}>
                <button className="delete" onClick={this.deleteItem.bind(this)}>&times;</button>
                <input type="checkbox" readOnly checked={!!this.props.task.checked} onClick={this.toggleComplete.bind(this)} />
                <span className='text'>
                    <strong>{this.props.task.username}</strong>:{this.props.task.text}</span>
            </li>
        )
    }
}